feat(theme): modular CSS, light/dark/auto theme system (Phase 1 - Foundation PR 1)#377
Open
vitorvasc wants to merge 46 commits intoopen-telemetry:mainfrom
Open
feat(theme): modular CSS, light/dark/auto theme system (Phase 1 - Foundation PR 1)#377vitorvasc wants to merge 46 commits intoopen-telemetry:mainfrom
vitorvasc wants to merge 46 commits intoopen-telemetry:mainfrom
Conversation
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
…ve documentation Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
…n themes.ts Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
…tence and auto mode Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
…cript to head Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
… documents Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
vitorvasc
force-pushed
the
feat/84-pr1-theme-system
branch
from
eca689d to
1bb6c52
Compare
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Contributor
PR ScreenshotsHomeLight
Dark
Instrumentation ListLight
Dark
Detail — Details tabLight
Dark
Detail — Telemetry tabLight
Dark
Detail — Configuration tabLight
Dark
Collector ListLight
Dark
Collector DetailLight
Dark
Captured from |
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR lays the groundwork for the Explorer redesign theme system by modularizing global CSS, introducing a light/dark/auto theme mode API with persistence and pre-hydration initialization, and aligning remaining UI accents with the updated brand primitives.
Changes:
- Split the monolithic
src/index.cssintosrc/styles/partials and update the app entry import accordingly. - Replace the old theme API with
{ mode, resolved, setMode }, addlocalStorage["td-color-theme"]persistence, and add an earlyindex.htmlscript to setdata-themebefore first paint. - Migrate remaining hard-coded/inline color usages to
otel-*primitives andprimary/secondaryrole tokens across multiple UI areas, plus update the screenshot script to capture both light and dark.
Reviewed changes
Copilot reviewed 41 out of 41 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| projects/84-ui-ux-design/NEXT-STEPS.md | Updates the redesign roadmap/status notes and Phase 1 PR tracking. |
| projects/84-ui-ux-design/00-foundation-audit.md | Updates audit checklist text to reflect the current state of V1_REDESIGN and PR 1 scope. |
| ecosystem-explorer/src/themes.ts | Reworks theme metadata to light/dark resolved themes and updates defaults. |
| ecosystem-explorer/src/themes.test.ts | Adds tests asserting the new theme record shape and default. |
| ecosystem-explorer/src/theme-context.tsx | Replaces theme context API with mode/resolved, persistence, and system-mode subscription. |
| ecosystem-explorer/src/theme-context.test.tsx | Updates tests to cover persistence, auto resolution, and matchMedia reactivity. |
| ecosystem-explorer/src/styles/tokens.css | Introduces tokenized theme variables with explicit [data-theme="dark"] and [data-theme="light"] blocks. |
| ecosystem-explorer/src/styles/base.css | Moves global resets/body defaults into a dedicated stylesheet. |
| ecosystem-explorer/src/styles/syntax.css | Moves YAML/syntax highlight classes into a dedicated stylesheet. |
| ecosystem-explorer/src/styles/index.css | Creates the Tailwind + partial import entry point and defines Tailwind @theme mappings. |
| ecosystem-explorer/src/main.tsx | Switches the global CSS import to the new src/styles/index.css entry point. |
| ecosystem-explorer/src/index.css | Removes the previous monolithic stylesheet. |
| ecosystem-explorer/src/features/not-found/not-found-page.tsx | Adjusts button/link accent styling to the updated semantic tokens. |
| ecosystem-explorer/src/features/java-agent/java-release-comparison-page.tsx | Updates gradients and “under development” accents to new brand primitives/tokens. |
| ecosystem-explorer/src/features/java-agent/java-instrumentation-list-page.tsx | Updates title gradient classes to use brand primitives. |
| ecosystem-explorer/src/features/java-agent/java-configuration-list-page.tsx | Updates title gradient classes to use brand primitives. |
| ecosystem-explorer/src/features/java-agent/java-agent-page.tsx | Updates title gradient classes to use brand primitives. |
| ecosystem-explorer/src/features/java-agent/instrumentation-detail-page.tsx | Updates loading/ornament gradients and accent colors to brand primitives and secondary tokens. |
| ecosystem-explorer/src/features/java-agent/configuration/configuration-builder-page.tsx | Updates title gradient classes to use brand primitives. |
| ecosystem-explorer/src/features/java-agent/components/sub-instrumentation-item.tsx | Updates list item border/hover accent styling to updated semantic tokens. |
| ecosystem-explorer/src/features/java-agent/components/multi-instrumentation-group-card.tsx | Updates hover shadow and badge accent colors to updated primitives/tokens. |
| ecosystem-explorer/src/features/java-agent/components/instrumentation-filter-bar.tsx | Updates radial gradient ornament fills to use brand primitives. |
| ecosystem-explorer/src/features/java-agent/components/instrumentation-card.tsx | Updates hover border/shadow accents to use updated primitives/tokens. |
| ecosystem-explorer/src/features/home/components/hero-section.tsx | Updates hero ornaments/gradients to use brand primitives. |
| ecosystem-explorer/src/features/home/components/explore-section.tsx | Updates background ornament fill to use brand primitives. |
| ecosystem-explorer/src/features/collector/collector-page.tsx | Updates gradient and “coming soon” accents to updated semantic tokens. |
| ecosystem-explorer/src/features/collector/collector-detail-page.tsx | Updates loading and header ornament accents to updated primitives/tokens. |
| ecosystem-explorer/src/features/about/about-page.tsx | Updates icon accent colors to updated semantic tokens. |
| ecosystem-explorer/src/components/ui/theme-toggle.tsx | Adds a theme toggle button that cycles light → dark → auto. |
| ecosystem-explorer/src/components/ui/theme-toggle.test.tsx | Adds tests for toggle cycling and data-theme updates. |
| ecosystem-explorer/src/components/ui/navigation-card.tsx | Updates navigation card accents/gradients to updated primitives/tokens. |
| ecosystem-explorer/src/components/ui/glow-badge.tsx | Updates primary variant styling to reflect the brand swap (now using secondary tokens). |
| ecosystem-explorer/src/components/ui/detail-card.tsx | Updates hover accent styling to updated semantic tokens. |
| ecosystem-explorer/src/components/icons/pipeline-icon.tsx | Updates icon stroke/fill colors to use brand primitives. |
| ecosystem-explorer/src/components/icons/otel-logo.tsx | Updates logo colors to use brand primitives directly. |
| ecosystem-explorer/src/components/icons/java-instrumentation-icon.tsx | Updates icon stroke/fill colors to use brand primitives. |
| ecosystem-explorer/src/components/icons/java-icon.tsx | Updates icon stroke/fill colors to use brand primitives. |
| ecosystem-explorer/src/components/icons/configuration-icon.tsx | Updates icon stroke/fill colors to use brand primitives. |
| ecosystem-explorer/src/components/icons/compass.tsx | Updates icon stroke/fill colors to use brand primitives. |
| ecosystem-explorer/scripts/take-screenshots.mjs | Updates screenshot automation to capture both dark and light via Playwright context colorScheme. |
| ecosystem-explorer/index.html | Adds an early inline script to set data-theme before React loads. |
…so they render Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Member
Author
|
@jaydeluca screenshots are working now :) :) I've pushed a fix to this branch so we capture images for both dark and light themes, but I'll update the comment template to show both of them in a separate PR. |
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
Signed-off-by: Vitor Vasconcellos <vvasconcellos1@gmail.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Part of the Phase 1 foundation work for the explorer redesign (#84).
Contributes to #370.
What's in this PR
src/index.cssinto focused partials undersrc/styles/:tokens.css— all CSS custom properties (dark + new light theme block)base.css— global resets and body defaultssyntax.css— code block / syntax highlight rulesindex.css— entry point that@imports the partialssrc/main.tsxnow imports fromsrc/styles/index.css.{ themeId, setThemeId }API with a cleaner{ mode, resolved, setMode }shape:mode— the user's stored preference:"light" | "dark" | "auto"resolved— the value actually applied to the document ("light" | "dark")setMode— writes tolocalStorage["td-color-theme"]and updates[data-theme]on<html><script>inindex.htmlthat runs before first paint, readslocalStorage["td-color-theme"], and sets[data-theme]on<html>. Prevents the white flash users see on dark-preferred systems before React hydrates.[data-theme="light"]block intokens.cssalongside the existing dark defaults. Reconciles the five remaining dark surface tokens (card,muted,border, and variants) to the navy palette.<ThemeToggle />component (cycleslight → dark → auto). Not yet rendered.primary = blue / secondary = orangerealignment already onmainV1_REDESIGNgate):card,card-secondary,muted,muted-foreground,border) shift to the navy palette on merge.What's not in this PR
NavBar.V1_REDESIGNinApp.tsx.Verification
bun run test— 781 tests passtsc -b— cleantd-color-themeupdates. Reload; confirm the selected theme is applied before React loads (no flash).auto; confirm the page updates without a reload.